import React from "react";
import { browserHistory } from "react-router";
import { Row, Col, Form, Icon, Input, Button, Checkbox, Table, Popover, Tag, DatePicker } from "antd";
const FormItem = Form.Item,
    CheckboxGroup = Checkbox.Group,
    RangePicker = DatePicker.RangePicker;

import TableFilter from "../pub/TableFilter.jsx";

class Index extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            keywords: "",
            pageNo: 1,
            pageSize: 20,
            total: 1000,
            loading: false,
            filter: {},
            filterVisible: {}
        };

        this.getFilterVisiable = this.getFilterVisiable.bind(this);
        this.getFilterVisiableChange = this.getFilterVisiableChange.bind(this);
        this.confirmFilter = this.confirmFilter.bind(this);
        this.filterHandler = this.filterHandler.bind(this);
        this.doQuery = this.doQuery.bind(this);
    }

    componentWillMount() {
        const { setPage } = this.props;
        setPage([ { title: "车联网平台首页", url: "/dashboard" } ], "车辆管理")
    }

    getFilterVisiableChange(name) {
        return (visible) => {
            const filterVisible = {};
            filterVisible[name] = visible;
            this.setState({
                filterVisible
            });
            visible === false && this.filterHandler(name);
        }
    }

    getFilterVisiable(name) {
        return !!this.state.filterVisible[name];
    }

    confirmFilter(name) {
        return () => {
            const filterVisible = {};
            filterVisible[name] = false;
            this.setState({
                filterVisible
            });
            this.filterHandler(name);
        }
    }

    filterHandler(name) {
        this.setState({ pageNo: 1 });
        this.doQuery();
    }

    doQuery() {
        const { pageNo, pageSize, filter } = this.state;
        console.log("doQuery", pageNo, pageSize, filter);
    }

    render() {
        const {pageNo, pageSize, total, loading} = this.state;

        const tags = [{ label: "成都", value: 1 }, { label: "天洋", value: 2 }, { label: "一汽红塔", value: 3 }, { label: "三环", value: 4 }, { label: "物流车", value: 5 } ]

        const columns = [
            {
                title: '编号',
                render: (text, record, index) => pageSize * (pageNo - 1) + index + 1,
                width: 80
            }, {
                title: '车牌号',
                dataIndex: 'plate',
                key: 'plate',
                filterDropdown: <TableFilter title="车辆关注筛选">
                                    <div className="ta-c">
                                        <CheckboxGroup options={ [{ label: "已关注", value: 1 }, { label: "未关注", value: 0 }] } onChange={ (value) => this.state.filter.plate = value } />
                                    </div>
                                    <Button type="primary" size="default" className="mt20 w100" onClick={ this.confirmFilter("plate") }>确定</Button>
                                </TableFilter>,
                filterDropdownVisible: this.getFilterVisiable("plate"),
                onFilterDropdownVisibleChange: this.getFilterVisiableChange("plate"),
                width: 180
            }, {
                title: '终端号',
                dataIndex: 'code',
                key: 'code',
                width: 220
            }, {
                title: '型号',
                dataIndex: 'model',
                key: 'model',
                width: 120
            }, {
                title: '车架号',
                dataIndex: 'vim',
                key: 'vim',
                width: 260
            }, {
                title: '创建时间',
                dataIndex: 'createTime',
                key: 'createTime',
                filterDropdown: <TableFilter title="创建时间筛选">
                                    <div className="ta-c">
                                        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder={ [ "开始时间", "结束时间" ] } onChange={ (value) => this.state.filter.createTime = value } />
                                    </div>
                                    <Button type="primary" size="default" className="mt20 w100" onClick={ this.confirmFilter("createTime") }>确定</Button>
                                </TableFilter>,
                filterDropdownVisible: this.getFilterVisiable("createTime"),
                onFilterDropdownVisibleChange: this.getFilterVisiableChange("createTime"),
                width: 200
            }, {
                title: '类型',
                key: 'type',
                render: (text, record, index) => record.type == 1 ? <div className="color">运营</div> : <div>非运营</div>,
                filterDropdown: <TableFilter title="车辆类型筛选">
                                    <div style={ { width: "80px", margin: "0 auto" } }>
                                        <CheckboxGroup options={ [{ label: "运营", value: 1 }, { label: "非运营", value: 0 }] } onChange={ (value) => this.state.filter.type = value } />
                                    </div>
                                    <Button type="primary" size="default" className="mt20 w100" onClick={ this.confirmFilter("type") }>确定</Button>
                                </TableFilter>,
                filterDropdownVisible: this.getFilterVisiable("type"),
                onFilterDropdownVisibleChange: this.getFilterVisiableChange("type"),
                width: 80
            }, {
                title: '标签',
                key: 'tags',
                render: (text, record, index) => record.tags && record.tags.length > 0 && record.tags.map((item, i) => <Tag key={ i }>
                                                                                                                           { item }
                                                                                                                       </Tag>),
                filterDropdown: <TableFilter title="车辆标签筛选">
                                    <div className="multiple-cbox">
                                        <CheckboxGroup options={ tags } onChange={ (value) => this.state.filter.tags = value } />
                                    </div>
                                    <Button type="primary" size="default" className="mt20 w100" onClick={ this.confirmFilter("tags") }>确定</Button>
                                </TableFilter>,
                filterDropdownVisible: this.getFilterVisiable("tags"),
                onFilterDropdownVisibleChange: this.getFilterVisiableChange("tags"),
                width: 280
            }, {
                title: '操作',
                key: 'opr',
                render: (text, record, index) => <Button type="primary" size="small" onClick={ () => browserHistory.push("/vehicle/" + record.code) }>编辑</Button>
            }];

        const pagination = {
            total,
            pageSize,
            size: "small",
            showQuickJumper: true,
            showTotal: (total, range) => `${range[0]}-${range[1]}条，共${total}条`,
            onChange: (current) => {
                this.setState({
                    pageNo: current
                })
            },
        };

        return <div>
                   <Form inline className="search-from">
                       <FormItem className="keywords">
                           <Input id="searchBtn" addonAfter={ <Icon type="search" onClick={ this.doQuery } /> } placeholder="关键字搜索(车牌号、平台号、车架号)" />
                       </FormItem>
                       <FormItem className="top-opr">
                           <Button type="primary" size="default" icon="plus-circle-o" onClick={ () => browserHistory.push("/vehicle/new") }>新增车辆</Button>
                           <Popover placement="bottomRight" content={ <TagsForm /> } title="设置快捷方式" trigger="click">
                               <Button type="primary" size="default" className="ml10">编辑车辆标签</Button>
                           </Popover>
                       </FormItem>
                   </Form>
                   <Table loading={ loading } className="gray-table mt20" rowKey="code" columns={ columns } dataSource={ data } pagination={ pagination } />
               </div>;
    }

}

class TagsForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: []
        };

        this.editHandler = this.editHandler.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        if (this.state.tags !== nextProps.tags) {
            this.setState({
                tags: nextProps.tags
            })
        }
    }

    editHandler(i, text) {
        const tags = this.state.tags;
        tags[i] = tags[i] || {};
        tags[i].text = text;
        this.setState({
            tags
        });
    }

    render() {
        const tags = this.state.tags || [];
        const getTag = (i) => {
            const tag = tags[i] || {};
            return <Input key={ i } placeholder="新增标签" suffix={ tag.text && <Icon type="close-circle" onClick={ () => this.editHandler(i, "") } /> } data-id={ tag.id } value={ tag.text } onChange={ (event) => this.editHandler(i, event.target.value) } />;
        }

        return <div className="tags-panel">
                   <Row gutter={ 20 }>
                       <Col span={ 12 }>
                       { getTag(0) }
                       </Col>
                       <Col span={ 12 }>
                       { getTag(1) }
                       </Col>
                   </Row>
                   <Row gutter={ 20 } className="mt10">
                       <Col span={ 12 }>
                       { getTag(2) }
                       </Col>
                       <Col span={ 12 }>
                       { getTag(3) }
                       </Col>
                   </Row>
                   <Row gutter={ 20 } className="mt10">
                       <Col span={ 12 }>
                       { getTag(4) }
                       </Col>
                       <Col span={ 12 }>
                       { getTag(5) }
                       </Col>
                   </Row>
                   <Row gutter={ 20 } className="mt10">
                       <Col span={ 12 }>
                       { getTag(6) }
                       </Col>
                       <Col span={ 12 }>
                       { getTag(7) }
                       </Col>
                   </Row>
                   <div>
                       <Button size="small" type="primary" className="mt20 w100">保存</Button>
                   </div>
               </div>;
    }
}

const data = [
    {
        plate: "川A UU345",
        code: "tk_car_131",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_132",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "1",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_133",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "1",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_134",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "1",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_135",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_136",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_137",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_138",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_139",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "1",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_140",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "1",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_141",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "1",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_142",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_143",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_144",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_145",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_146",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_147",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_148",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_149",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
    {
        plate: "川A UU345",
        code: "tk_car_150",
        model: "凌特2016",
        vim: "VIM4564555456556666",
        createTime: "2016-11-18 13:45:10",
        type: "0",
        tags: ["华润", "成都"]
    },
];

export default Index;